import { ProPageContainer, ProContainerQuery } from '@hczy/ant-design-vue'
import { Layout, BackTop } from 'ant-design-vue'
import ProSider from '@/components/GlobalSider/Sider.vue'
import ProHeader from '@/components/GlobalHeader/Header.horizontal.jsx'
import ProTabs from '@/components/GlobalTabs/Tabs.vue'
import { formatSiderMenuRoutes } from '@/router/utils'
import { MediaQueries, BreakPoints } from './media-query'

import './BasicLayout.less'

/** @type { import('vue').ComponentOptions } */
const BasicLayout = {
  name: 'BasicLayout',
  data() {
    return {
      collapsed: false,
      keepAlive: true,
      selectedKeySider: ''
    }
  },
  computed: {
    siderStyle() {
      const width = (this.collapsed ? 48 : 208) + 'px'
      const style = {
        'flex': `0 0 ` + width,
        'width': width,
        'min-width': width,
        'max-width': width,
        'overflow': 'hidden',
        'transition': 'min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
      }
      return style
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // const pathList = route.matched.map(r => r.path).filter(Boolean)
        // this.selectedKeyHeader = pathList[0]
        this.selectedKeySider = route.fullPath
      }
    }
  },
  methods: {
    handleResize(result) {
      for (const key of BreakPoints) {
        if (result[key]) {
          this.$store.dispatch('app/setBreakpoint', key)
          break
        }
      }
    }
  },
  render() {
    const { breakpoint, isLikeMobileScreen, menuRoutes, cachedViews } = this.$store.getters
    const siderMenuRoutes = formatSiderMenuRoutes(menuRoutes)
    const isSiderFixed = true
    const useCustomScrollbar = true && !isLikeMobileScreen // 后续提供配置

    const vnodeSider = []
    if (isLikeMobileScreen) {
      // vnodeSider.push(<Drawer { ...mobileDrawerData }><ProSider { ...mobileSiderData } /></Drawer>)
    } else {
      isSiderFixed && vnodeSider.push(<aside style={ this.siderStyle } data-collapsed={ this.collapsed + '' } />)
      vnodeSider.push(<ProSider vModel={ this.collapsed } data={ siderMenuRoutes } fixed={ isSiderFixed } header selectedKey={ this.selectedKeySider } theme="light" />)
    }

    const vnodeBody = [
      <Layout.Content id="AppBody">
        <ProTabs />
        <ProPageContainer keepAlive={ this.keepAlive } routeKey={ this.$route.fullPath } cachedViews={ cachedViews } useCustomScrollbar={ useCustomScrollbar } style={ useCustomScrollbar ? 'height: calc(100% - 32px);' : undefined } />
        <BackTop visibilityHeight={ 48 + 120 } target={ () => document.querySelector(useCustomScrollbar ? '#AppBody .pro-page-container .Scrollbar__wrap' : '#AppBody') } />
      </Layout.Content>
    ]

    const wrapperCls = ['pro-layout', `screen-${ breakpoint }`]
    return (
      <ProContainerQuery query={ MediaQueries } onResize={ this.handleResize }>
        <Layout class={ wrapperCls }>
          <Layout.Header />
          <ProHeader fixed />
          <Layout hasSider>
            { [vnodeSider, vnodeBody] }
          </Layout>
        </Layout>
      </ProContainerQuery>
    )
  }
}

export default BasicLayout
